<template>
  <div class="login">
    <div class="main blur">
      <ul>
        <li>
          <img src="@/assets/img/logo1.png" alt="">
        </li>
        <li>
          <input type="text" v-model="username" class="username" placeholder="User name" autocomplete="new-password"/>
        </li>
        <li>
          <input type="password"  v-model="password" class="password" placeholder="Password" autocomplete="new-password"/>
        </li>
        <li>
          <p>forgot password ?</p>
        </li>
        <li class="btn">
          <a-button type="primary" block @click="login">
            Sign in
          </a-button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { Login } from '@/api/index'
// import { createMenuTree } from '@/utils/index'
import { message } from 'ant-design-vue'
// import router from '@/router/index'

export default {
  name: 'Login',
  components: {},
  data () {
    return {
      username: '',
      password: ''
    }
  },
  watch: {

  },
  created () {

  },
  mounted () {
    window.addEventListener('keydown', (e) => {
      if (e.keyCode === 13) {
        this.login()
      }
    })
  },
  methods: {
    login () {
      if (this.username && this.password) {
        Login({
          username: this.username,
          password: Number(this.password)
        }).then((res) => {
          if (res.data.token) {
            this.$storejs.set('token', res.data.token)
            this.$storejs.set('isLogin', 1)
            message.success(res.msg)
            this.$router.push('/visualData')
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.login {
  height: 100%;
  background: url("../../assets/img/login_bg.png") no-repeat center center;
  background-size: 100% 100%;
  .main {
    position: fixed;
    right: 20%;
    top: 15%;
    width: 4rem;
    height: 6rem;
    box-shadow: 0px 0px .24rem -.06rem black;
  }
  .blur {
    position: absolute;
    overflow: hidden;
    z-index: 1;
  }

  .blur::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: -.3rem;
    background-image: url("../../assets/img/login_bg.png");
    background-position: center;
    background-size: 100% 100%;
    background-attachment: fixed;
    filter: blur(10px);
  }
  .main {
    li {
      background: rgba(255, 255, 255, 0.3);
      &:nth-of-type(1){
        text-align: center;
        padding-top: .4rem;
         background: rgba(255, 255, 255, 0);
        img{
          height: 1.8rem;
          width: 60%;
        }
      }
      p{
        height: .5rem;
        line-height: .5rem;
        text-align: center;
        color: black;
        opacity: .5;
      }
      .username,
      .password {
        width: 100%;
        border: none;
        height: .6rem;
        font-size: .2rem;
        line-height: .5rem;
        padding-left: .1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.1);
        border-radius: 0;
        outline: none;
      }
    }
    .btn{
      height: 1rem;
      text-align: center;
      button{
        border-radius: 0;
        width: 90%;
        height: 60%;
      }
    }
  }
}
</style>
